<template>
	<div>
		<!-- <el-dialog v-model="centerDialogVisible" :title="Warning" width="50%" center>
    <div>
      <div>
        已执行群聊(2)
      </div>
      <div style="margin-top: 10px;">
        <span>群名称：</span>
        <el-select v-model="value" class="m-2" placeholder="Select">
          <el-input
            v-model="input1"
            class="w-50 m-2"
            placeholder="Pick a date"
            :suffix-icon="Search"
          />
        </el-select>
        <span>选择群主：</span>
        <el-select v-model="value" class="m-2" placeholder="Select" style="margin: 0 10px;">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <span>选择标签：</span>
        <el-select v-model="value" class="m-2" placeholder="Select">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <el-button type="primary" plain style="float: right;margin-left: 10px;">批量移除群聊</el-button>
        <el-button type="primary" plain style="float: right" :icon="Plus" @click="addapi()">添加群聊</el-button>
        
      </div>
      <div>
        <el-table
          ref="multipleTableRef"
          :data="tableData"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55" />
          <el-table-column label="群聊" width="120">
            <template #default="scope">{{ scope.row.date }}</template>
          </el-table-column>
          <el-table-column property="name" label="群主" width="120" />
          <el-table-column property="address" label="以应用任务" show-overflow-tooltip />
          <el-table-column property="address" label="群标签" show-overflow-tooltip />
          <el-table-column property="address" label="操作" show-overflow-tooltip />
        </el-table>
      </div>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="centerDialogVisible = false"
          >确定</el-button
        >
      </span>
    </template>
  </el-dialog> -->
		<el-dialog v-model="addshow" title="添加群聊" width="850px" center style="min-width: 850px">
			<div></div>
			<div style="">
				<el-row :gutter="20">
					<el-col :span="18"
						><div
							class="grid-content ep-bg-purple listScroll"
							style="overflow-x: hidden; overflow-y: scroll"
						>
							<div>已执行群聊(2)</div>
							<div style="margin-top: 10px">
								<div>
									<span>群名称：</span>

									<el-input
										v-model="input1"
										class="w-50 m-2"
										placeholder="请输入要搜索的群聊"
										
										style="margin-right: 50px; width: 200px"
									>
									<template #suffix>
										<el-icon class="el-input__icon"  @click="postGroupListsapi"><Search /></el-icon>
									</template>
									</el-input>

									<span>选择群主：</span>
									<!-- <el-select v-model="value" class="m-2" placeholder="请选择群主" style="margin-right: 70px;" @click="leader">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select> -->
									<el-input
										v-model="leaderinput"
										class="w-50 m-2"
										placeholder="请输入要搜索的群聊"
										:suffix-icon="ArrowDown"
										style="width: 200px; "
										@click="leader"
									/>
								</div>

								<span style="margin-top: 15px">选择标签：</span>
								<el-input
									v-model="labelinput"
									class="w-50 m-2"
									placeholder="请输入要搜索的群聊"
									:suffix-icon="ArrowDown"
									style="width: 200px; "
									@click="labelapi"
								/>
								<span style="margin-left: 5px;"><el-button  @click="resetapi">重置</el-button></span>
								<span style="margin-left: 5px;"><el-button type="primary" @click="postGroupListsapi">搜索</el-button></span>
							</div>
							<div>
								<el-table
									ref="multipleTableRef"
									:data="tableData"
									style="width: 100%"
									@selection-change="handleSelectionChange"
								>
									<el-table-column type="selection" width="55" />
									<el-table-column label="群聊名称">
										<template #default="scope">{{ scope.row.name }}</template>
									</el-table-column>
									<el-table-column property="address" label="群标签" show-overflow-tooltip>
										<template #default="scope">
											<!-- <div v-for="item in scope.row.tags">{{item.name}}</div> -->
											<el-tag v-for="item in scope.row.tags" style="margin: 5px">{{ item.name }}</el-tag>
										</template>
									</el-table-column>
								</el-table>
							</div>
						</div></el-col
					>
					<el-col style="border-left: 1px solid #eee" :span="6"
						><div class="grid-content ep-bg-purple" style="min-height: 500px; padding-left: 7px">
							<div style="">
								<span>已选择的群聊:({{ tableDatalist.length }})</span>
								<span style="float: right; color: #409eff; cursor: pointer" @click="deletewhole">全部清空</span>
							</div>
							<div v-for="(item, index) in tableDatalist" style="margin: 7px">
								<span>{{ item.name }}</span>
								<span style="float: right; color: #409eff; cursor: pointer" @click="deletetable(index, item)"
									><el-icon><Close /></el-icon
								></span>
							</div></div
					></el-col>
				</el-row>
				<div style="text-align: right; margin-bottom: 15px">
					<el-button @click="addshow = false">取消</el-button>
					<el-button type="primary" @click="preservation">保存</el-button>
				</div>
			</div>
		</el-dialog>
		<labels ref="TestRef" :labeldataapi="labeldataapi"></labels>
		<chooseDialogue ref="leaderdata" @getChooseData="getDialogueData($event, val)"></chooseDialogue>
	</div>
</template>
<script setup>
import { ref, defineExpose, defineProps } from 'vue'
import { Plus } from '@element-plus/icons-vue'
import labels from './label.vue'
import chooseDialogue from './chooseDialogue.vue'
import { Calendar, Search, ArrowDown } from '@element-plus/icons-vue'
import { postGroupLists } from '@/api'
var centerDialogVisible = ref(false)
var addshow = ref(false)
const input1= ref()
const leaderinput = ref('')
const Warning = ref('')
const TestRef = ref()
const leaderdata = ref()
const labeldata = ref()
const labelinput = ref('')
const tableData = ref([])
const tableDatalist = ref([])
const multipleTableRef = ref()
//定义参数 已经选中的ITEMID
const props = defineProps({
	groupchatapi: {
		type: Function,
		default: Function,
		required: true
	}
})
const editshow = (val) => {
	console.log(val)
	Warning.value = val.name
	centerDialogVisible.value = val.show
}
const quantity = ref(0)
const addapi = (val) => {
	quantity.value = val.quantity
	addshow.value = true
}
const deletetable = (index, item) => {
	tableDatalist.value.splice(index, 1)
	for (var i = 0; i < tableData.value.length; i++) {
		if (tableData.value[i] == item) {
			multipleTableRef.value.toggleRowSelection(tableData.value[i], undefined)
		}
	}
	// rows.forEach((row) => {
	//   console.log(multipleTableRef.value.toggleRowSelection(row, undefined))
	// })
}
const deletewhole = () => {
	// tableDatalist.value = []
	for (var i = 0; i < tableData.value.length; i++) {
		console.log(multipleTableRef.value)
		for(var e = 0;e<tableDatalist.value.length;e++){
			if(tableData.value[i] == tableDatalist.value[e]){
				multipleTableRef.value.toggleRowSelection(tableDatalist.value[e], undefined)
			}
		}
		
		// deletetable(i,tableData.value[i])
	}
}
const leader = () => {
	// if()
	console.log(leaderlistdata)
	if (leaderlistdata.value.length > 0) {
		leaderdata.value.show('leader', leaderlistdata.value)
	} else {
		leaderdata.value.show('leader')
	}
}
const handleSelectionChange = (val) => {
	tableDatalist.value = val
}
const labelapi = () => {
	// console.log('111')
	// tableselect.value=true
	var data = {
		show: true,
		type: 1
	}
	TestRef.value.tableshow(data)
}
const tags=ref([])
const labeldataapi = (val) => {
	console.log(val)
	tags.value=val.id
	labeldata.value = val.list
	for (var i = 0; i < labeldata.value.length; i++) {
		if (i == 0) {
			labelinput.value = labeldata.value[i].name
		} else {
			labelinput.value = labelinput.value + ',' + labeldata.value[i].name
			console.log(labelinput.value)
		}
	}
}
const leaderlistdata = ref([])
const staff=ref([])
const getDialogueData = (val) => {
	console.log(val)
	leaderlistdata.value = val
	for (var i = 0; i < leaderlistdata.value.length; i++) {
		staff.value.push(leaderlistdata.value[i].id)
		if (i == 0) {
			leaderinput.value = leaderlistdata.value[i].name
		} else {
			leaderinput.value = leaderinput.value + ',' + leaderlistdata.value[i].name
			console.log(leaderinput.value)
		}
	}
}
const postGroupListsapi = () => {
	postGroupLists({name:input1.value,staff:staff.value,tags:tags.value,page:1,size:99999}).then((res) => {
		console.log(res)
		tableData.value = res.data.item
	})
}
const resetapi=()=>{
	input1.value=''
	staff.value=[]
	tags.value=[]
	labelinput.value=''
	leaderinput.value=''
	postGroupListsapi()
}
const preservation = () => {
	if (quantity.value != undefined) {
		if (tableDatalist.value.length > 1) {
			ElMessage({
				message: '只能选择' + quantity.value + '个群聊',
				type: 'warning'
			})
		} else {
			addshow.value = false
			props.groupchatapi(tableDatalist)
		}
	} else {
		addshow.value = false
		props.groupchatapi(tableDatalist)
	}
}
postGroupListsapi()
defineExpose({ editshow, addapi })
</script>
<style>
.listScroll::-webkit-scrollbar {
	display: none; /* Chrome Safari */
}
</style>
